<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<base href="<%=basePath%>" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>resource/css/common.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>resource/css/product.css" />
	<script type="text/javascript" src="<%=basePath%>resource/js/jquery-1.10.2.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="<%=basePath%>resource/js/base.js" defer="defer"></script>
	<script type="text/javascript" src="<%=basePath%>resource/js/QSearch.js" defer="defer"></script>
	<script type="text/javascript" src="<%=basePath%>resource/js/QULList.js" defer="defer"></script>
<script type="text/javascript">

$().ready(function(){
	
	var $search = QSearch.init("<%=basePath%>" + "user/product_list.do", "json"),
	 	query = function(){
	 	
			var pageSize = 20,
				pageNum = 1;
			
			$search.setPageNum(pageNum);
			$search.setPageSize(pageSize);
			$search.doSearch();
		},
		successFun = function(_result){

			var p,
				image = "<img src='<%=basePath %>resource/images/p_21.jpg' width='176' height='170'/>",
				price,
				market_price,
				$ul = QULList.init("#ultest");
			for(var i=0, len=_result.page.length; i<len; i++){
				p = _result.page[i];

				if(p.images && p.images.length > 0){
					image = "<img src='" + p.images[0].url +"' width='176' height='170'/>"
				}
				_result.page[i] = $(
					[
						"<li>",
						"<a href='<%=basePath %>user/product_info.do?id=" + p.id + "'>",
						image,
						"<span class='price'>￥" + p.price +"<del>" + p.market_price +"</del></span>",
						"<span>" + p.name + "</span>",
						"</a>",
						"</li>"
					].join("")).html();
			}
			$ul.refresh(_result);
		};
	$search.onSearch(successFun);
	query();
});
</script>
</head>
<body>
<jsp:include page="../header.jsp" />
<div class="content">
<div class="bar">
	<div class="div_p_01 content_div">
		<div class="hotProductCategory border_radius_3">
			<jsp:include page="./category_list.jsp" />
		</div>
		<div class="hotProduct border_radius_3">
			<div class="title">热销商品</div>
			<ul>
				<li>
					<a href="#">2014秋茶 特级清馨清香铁观音</a>
					<div>
						<div>评分：</div>
						<div class="score8"></div>
						<div>4.0</div>
					</div>
					<div>
						销售价: <strong>￥188.00</strong>
					</div>
					<div>
						月销量：<em>0</em>
					</div>
				</li>
				<li>
					<a href="#">2014秋茶 特级清馨清香铁观音</a>
					<div>
						<div>评分：</div>
						<div class="score8"></div>
						<div>4.0</div>
					</div>
					<div>
						销售价: <strong>￥188.00</strong>
					</div>
					<div>
						月销量：<em>0</em>
					</div>
				</li>
				<li>
					<a href="#">2014秋茶 特级清馨清香铁观音</a>
					<div>
						<div>评分：</div>
						<div class="score8"></div>
						<div>4.0</div>
					</div>
					<div>
						销售价: <strong>￥188.00</strong>
					</div>
					<div>
						月销量：<em>0</em>
					</div>
				</li>
				<li>
					<a href="#">2014秋茶 特级清馨清香铁观音</a>
					<div>
						<div>评分：</div>
						<div class="score8"></div>
						<div>4.0</div>
					</div>
					<div>
						销售价: <strong>￥188.00</strong>
					</div>
					<div>
						月销量：<em>0</em>
					</div>
				</li>
				<li class="last">
					<a href="#">2014秋茶 特级清馨清香铁观音</a>
					<div>
						<div>评分：</div>
						<div class="score8"></div>
						<div>4.0</div>
					</div>
					<div>
						销售价: <strong>￥188.00</strong>
					</div>
					<div>
						月销量：<em>0</em>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="div_p_02 content_div">
		<div class="path border_radius_3">
			<ul>
				<li>首页</li>
				<li>乌龙茶</li>
				<li class="last">铁观音</li>
			</ul>
		</div>
		<form>
			<div class="filter">
				<div class="title">筛选商品</div>
				<div class="filterContent">
					<dl>
						<dt>价格：</dt>
						<dd><a href="#">100元及以下</a></dd>
						<dd><a href="#">101-300元</a></dd>
						<dd><a href="#">300元及以上</a></dd>
					</dl>
					<dl>
						<dt>包装：</dt>
						<dd><a href="#">经济自饮装</a></dd>
						<dd><a href="#">精美礼品装</a></dd>
					</dl>
					<dl class="last">
						<dt>净含量：</dt>
						<dd><a href="#">50g及以下</a></dd>
						<dd><a href="#">51-100g</a></dd>
						<dd><a href="#">101-250g</a></dd>
						<dd><a href="#">250g以上</a></dd>
					</dl>
				</div>
				<div class="moreFilter">
					<a href="#" class="moreFilterDown">更多选项</a>
				</div>
			</div>
			<div class="searchBar">
				<div class="layout">
					<label>布局:</label>
					<a href="#" class="tableType currentTable"><span>&nbsp;</span></a>
					<a href="#" class="listType"><span>&nbsp;</span></a>
					<label>数量:</label>
					<a href="#" class="pageSize current"><span>20</span></a>
					<a href="#" class="pageSize"><span>40</span></a>
					<a href="#" class="pageSize"><span>80</span></a>
					<span class="page">
						<label>共30个商品 1/2</label>
						<a href="#" class="nextPage"><span>下一页</span></a>
					</span>
				</div>
			</div>
			<div class="result">
				<ul id="ultest"></ul>
				<%--
				<ul>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_21.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_22.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_23.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_24.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_25.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_21.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_22.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li>
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_23.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li class="last">
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_29.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li class="last">
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_30.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li class="last">
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_31.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
					<li class="last">
						<a href="<%=basePath %>user/product_info.do">
							<img src="<%=basePath %>resource/images/p_27.jpg" width="176" height="170"/>
							<span class="price">￥201.00<del>188.00</del></span>
							<span>2014秋茶 特级清馨清香铁观音礼罐装250g*2-梅,赠茶食</span>
						</a>
					</li>
				</ul>
			--%></div>
			<div class="pagination">
				<span class="firstPage">&nbsp;</span>
				<span class="previousPage">&nbsp;</span>
				<span class="currentPage">1</span>
				<a href="#">2</a>
				<span class="nextPage">&nbsp;</span>
				<span class="lastPage">&nbsp;</span>
			</div>
		</form>
	</div>
</div>
</div>
<jsp:include page="../footer.jsp" />
</body>
</html>